<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>欢迎进入</title>
      <style>
    .sss{
        float: auto;
        width: 800px;
        height: 800px;
        margin: 40px auto;
    }
    .nav{
        width: 800px;
        height: 50px;
        margin: 40px auto;
    }
    .nav .nav_box{
        float: right;
        width: 700px;
        height: 60px;
        background-color:white;
        margin: auto; 
    }
    li{
        list-style: none;
    }
    .logo{
            float: left;
    }
    .nav_box >ul >li{
            float: left;
    }
    .nav_box > ul> li> a{
            display: block;        /* 改为块状元素*/
            height: 42px;   
            padding: 0 30px;    /*文字之间pdding撑开*/
            line-height: 42px;
            font-size: 18px;
            color: black;
        }
        .nav_box >ul >li >a:hover{
            border-bottom: 2px solid #00a4ff;
            color: #00a4ff;
            border-top: 3px solid color black;
            background-color: beige;
        }
        .nav_box >ul >li>ul>li{
            height: 40px;
            width:auto;
            color: black;
        }
        a{
            display: block;
            text-decoration:none;
        }
        .nav_box >ul >li>ul{      /*二级菜单*/
            background:white;
            display: none;
        }
        .nav_box >ul >li:hover>ul{
            display: block;
        }

        .nav_box >ul >li>ul>li>a{
            display: block;        /* 改为块状元素*/
            height: 42px;   
            line-height: 25px;
            font-size: 16px;
            color: black;
        }
        .nav_box >ul >li>ul>li:hover{
            background: wheat;
        }
        .aaa{
            margin-top: 150px;
            position: absolute;
            bottom: 400px;
        }
        .aaa p{
            font-style: italic;
            font-size: 50px;
            color: blue;
        }
        .aaa1{
            position: relative;
            top: 100px;
        }
        .aaa1 p{
            font-style: italic;
            font-size: 50px;
            font-weight: 100px;
            font-family: 微软雅黑;
        }
        .sss img{
            box-shadow: 10px 10px 10px 10px rgba(0, 0, 0,.3);
        }
       .lxb ul {list-style-type: none;
            margin: 0;
            padding: 0;
            width: 15%;
            background-color: whitesmoke;
            position: fixed;
            height: 100%;
            overflow: auto;
        }
       .lxb li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
.lxb li a:hover {
  background-color:wheat;
  color: #00a4ff;}
      </style>
    </head>
    <body background="R-C.jpg">
        <herder>
            <div class="lxb">
            <ul>
                <li><a href="#图片一">图片一</a></li>
                <li><a href="#图片二">图片二</a></li>
                <li><a href="#图片三">图片三</a></li>
              </ul>
            </div>
       <div class="nav">
        <div class="logo"><img src="QQ截图20221203132509.png " height="90px" width="100px"></div>
        <div class="nav nav_box">
            <ul>
                <li><a href="https://lpl.qq.com/">首页</a>
                    <ul>
                        <li><a href="#">什么</a></li>
                        <li><a href="#">都</a></li>
                        <li><a href="#">没有</a></li>
                    </ul>
                </li>
                <li><a href="https://www.icourse163.org/">产品</a>
                    <ul>
                        <li><a href="#">红豆派</a></li>
                        <li><a href="#">冰淇淋</a></li>
                        <li><a href="#">酸辣粉</a></li>
                    </ul>
                </li>
                <li><a href="https://www.taobao.com/">资料</a>
                    <ul>
                        <li><a href="#">web</a></li>
                        <li><a href="#">c语言</a></li>
                        <li><a href="#">微积分</a></li>
                    </ul>
                </li>
                <li><a href="https://www.jiayuan.com/">项目</a>
                    <ul>
                        <li><a href="#">搬砖</a></li>
                    </ul>
                </li>
                <li><a href="https://lpl.qq.com/">电话</a>
                    <ul>
                        <li><a href="#">10086</a></li>
                    </ul>
            </ul>
        </div>
       </div>
       <div class="sss">
        <div class="aaa1">
            <img src="微信图片_20221125171348.jpg" height="500px" width="800px">
            <p>我贪恋人间烟火,不偏不倚正好是你。</p>
        </div>
        <div class="aaa">
            <p>图片</p>
        </div>
       </div>
    </herder>
    <main>
        <div class="sss">
        <div>
            <img src="OIP-C.jpg" height="500px" width="800px">
        </div>
        </div>
    </main>
    <footer>
        <div class="sss">
            <img src="R-C (1).jpg" height="500px" width="800px">
        </div>
    </footer>
    </body>
</html>
